<template>
	<view class="">
		<image :src="image" mode="" style="width: 100%;height:381.81rpx;"></image>
		<view class="container">
			<view style="border-bottom: 1.8rpx solid #F8F8F8;">
				<view style="font-weight: 600;font-size: 16px;margin: 18rpx 0;">
					<text>{{title}}</text>
				</view>
				<view class="dingdan-msg" :class="{active:flag}">
					<view class="dingdan-msg-contant">
						<view class="dingdan-msg-right">{{introduce}}</view>
					</view>
				</view>
				<view class="show-or-noshow" @click="showTag">{{flag?"查看全部":"收起"}}</view>
			</view>
			<!-- 选集 -->
			<view class="">
				<view class="" style="display: flex;align-items: center;margin: 18rpx 0rpx;">
					<text style="flex: 1;font-weight: 700;font-size: 16px;">选集</text>
					<text style="color: #9f9f9f;margin-right: 10rpx;">共{{total}}集</text>
					<image src="../../../static/image/video/Vector.png" mode="" style="width: 18.1rpx;height:18.1rpx;">
					</image>
				</view>
				<view class="textNum">
					<view :class="state==item ? 'setBox':'setNumber' " v-for="item,index in setNum " :key="item.id"
						@click="onsetNumber(item)">
						{{item.text}}
					</view>
				</view>



			</view>


			<view class="recommend">
				<text class="recText">为你推荐</text>
				<uniGrid :column="3" :showBorder="false" :highlight='false' :square="false">
					<view v-for="(item,index) in movieList" :key="index" @click="onClick(item)">
						<uniGridItem style="margin-top: 30rpx;">
							<image :src="item.url" mode="" style="width:194rpx;height:254rpx;"></image>
							<view class="text">
								<text>{{item.title}}</text>
								<text class="textStyle">{{item.introduce}}</text>
							</view>
						</uniGridItem>
					</view>

				</uniGrid>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	export default {
		components: {
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				image: '../../../static/image/people/swiper1.jpg',
				title: '小悟空',
				introduce: '也被称为运动画面或动态画面，即“映画”，是作品视觉艺术形式，通过使用移动图像来表达沟通思想通过使用移动图像来表达沟通思想通过使用移动图像来表达沟通思想通过使用移动图像来表达沟通思想',
				flag: false,
				total: '20',
				state: '',
				movieList: [{
					url: '../../../static/image/video/Rectangle01.png',
					title: '乡村振兴记录',
					introduce: '该纪录片记录了中该纪录片记录了中...',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '旅游',
					introduce: '该纪录片记录了中该纪录片记录了中...',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '访谈',
					introduce: '该纪录片记录了中该纪录片记录了中...',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '娱乐',
					introduce: '该纪录片记录了中该纪录片记录了中...',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '乡村振兴记录',
					introduce: '该纪录片记录了中该纪录片记录了中...',
				}],
				setNum: [{
						id: 0,
						text: 1
					},
					{
						id: 1,
						text: 2
					},
					{
						id: 2,
						text: 3
					},
					{
						id: 3,
						text: 4
					},
					{
						id: 4,
						text: 5
					},
					{
						id: 5,
						text: 6
					},
					{
						id: 6,
						text: 7
					}
				]
			}
		},
		onLoad(option) {
			// let data = JSON.parse(option.item)
			let data = JSON.parse(decodeURIComponent(option.item));
			console.log("获取数据", data)

		},
		methods: {
			showTag() {
				this.flag = !this.flag;
			},
			onsetNumber(item) {
				this.state = item
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0rpx 18rpx;

		.dingdan-msg {
			height: 127rpx;
			overflow: hidden;
			line-height: 1.6;

		}

		.show-or-noshow {
			text-align: center;
			padding: 18rpx 0rpx;
			font-size: 14px;
		}

		.dingdan-msg-contant {
			color: #9f9f9f;
		}

		//高度自适应，全部显示
		.active {
			height: auto;
			overflow: visible;

		}

		.recommend {
			.recText {
				display: block;
				font-weight: 700;
				font-size: 16px;
			}

			/deep/ .uni-grid-item__box {
				align-items: center;
			}

			.text {
				display: flex;
				flex-flow: column;
				align-items: end;
				text-align: left;
				font-size: 26rpx;
				margin-top: 9rpx;

				.textStyle {
					width: 107px;
					font-size: 21rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}


		}

		.textNum {
			width: 100%;
			height: 73rpx;
			margin: 27.2rpx 0rpx;
			display: flex;
			text-align: center;
			line-height: 73rpx;
			color: #9f9f9f;
			overflow: hidden;

			.setNumber {
				background-color: #F7F9FC;
				width: 73rpx;
				height: 73rpx;
				margin-right: 27.2rpx;
				border-radius: 9rpx;

			}

			.setBox {
				background-color: #F7F9FC;
				border: 1px solid #33D6A6;
				color: #33D6A6;
				width: 73rpx;
				height: 73rpx;
				margin-right: 21rpx;
				border-radius: 9rpx;

			}

		}
	}
</style>
